<template>
  <div class="layout-container">
    <!-- 左侧面板 (20%) -->
    <div class="left-panel">
      <ChatPanel />
    </div>

    <!-- 中间面板 (60% 或 80%) -->
    <div class="middle-panel" :class="{ expand: isRightPanelCollapsed }">
      <MapPanel />
    </div>

    <!-- 右侧面板 (20%) -->
    <div class="right-panel" :class="{ collapsed: isRightPanelCollapsed }">
      <AnalysisPanel />
    </div>

    <!-- 折叠/展开按钮 -->
    <t-button
      theme="primary"
      shape="circle"
      class="toggle-button"
      :class="{ collapsed: isRightPanelCollapsed }"
      @click="toggleRightPanel"
    >
      <template #icon>
        <t-icon title="打开" name="caret-left" v-if="isRightPanelCollapsed" />
        <t-icon title="关闭" name="caret-right" v-else />
      </template>
    </t-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
// import ChatPanel from './components/ChatPanel.vue'; // 自己写的chat组件
// import ChatPanel from "./components/TDChatPanel.vue"; // TD的chat组件
import ChatPanel from "./components/TDChatPanelSender.vue"; // TD的chat组件Sender
import MapPanel from "./components/MapPanel.vue";
import AnalysisPanel from "./components/AnalysisPanel.vue";

// 右侧面板折叠状态
const isRightPanelCollapsed = ref(false);

// 切换右侧面板折叠状态
const toggleRightPanel = () => {
  isRightPanelCollapsed.value = !isRightPanelCollapsed.value;
};
</script>

<style lang="less" scoped>
.layout-container {
  display: flex;
  height: 100vh;
  overflow: hidden;

  .left-panel {
    width: 20%;
    height: 100%;
    background-color: #f5f7fa;
    border-right: 1px solid #e5e6eb;
  }

  .middle-panel {
    width: 60%;
    height: 100%;
    background-color: #ffffff;
    transition: width 0.3s ease;

    // 右侧面板折叠时，中间面板扩展到80%
    &.expand {
      width: 80%;
    }
  }

  .right-panel {
    width: 20%;
    height: 100%;
    background-color: #f5f7fa;
    border-left: 1px solid #e5e6eb;
    transition: width 0.3s ease;
    position: relative; // 为按钮提供定位参考

    // 折叠状态
    &.collapsed {
      width: 0;
      overflow: hidden;
      border-left: none;
    }
  }

  .toggle-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    // 默认在右侧面板左侧
    right: calc(20% - 12px); // 按钮半径为12px

    // 折叠状态下移动到最右侧
    &.collapsed {
      right: 12px;
    }
  }
}
</style>
